<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" size="mini" @click="delAll"
          >批量删除</el-button
        >
        <el-input
          v-model="select_word"
          size="mini"
          placeholder="请输入户名名称"
          class="handle-input"
        ></el-input>
        <el-button
          type="primary"
          size="mini"
          @click="centerDialogVisible = true"
          >添加村户</el-button
        >
      </div>
    </div>
    <!-- 查看 -->
    <el-table
      size="mini"
      ref="multipleTable"
      border
      style="width: 100%"
      height="570px"
      :data="data"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column
        prop="name"
        label="户主姓名"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column label="家庭类别" width="120" align="center">
        <template slot-scope="scope">
          {{changeFamilyCategory(scope.row.familyCategory)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="housingSituation"
        label="住房情况"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="familyNum"
        label="家庭人数"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column label="是否有重点人员" width="120" align="center">
        <template slot-scope="scope">
          {{changekeyPersonnel(scope.row.keyPersonnel)}}
        </template>
      </el-table-column>
      <el-table-column prop="township" label="直属乡镇" width="120" align="center"></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 翻页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="total,prev,pager,next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>

    <!-- 添加 -->
    <el-dialog
      title="添加村户信息"
      :visible.sync="centerDialogVisible"
      width="400px"
      center
    >
      <el-form
        :model="registerForm"
        ref="registerForm"
        label-width="80px"
        action=""
        id="tf"
      >
        <div>
          <label>村户姓名：</label>
          <input
            placeholder="村户姓名"
            type="text"
            name="name"
            style="width: 260px; height: 25px; margin-bottom: 15px"
          />
        </div>
        <div style="margin-bottom: 15px;">
          <label>家庭类别：</label>
          <input type="radio" name="familyCategory" value="0"/>一般户&nbsp;&nbsp;
          <input type="radio" name="familyCategory" value="1"/>放心户&nbsp;&nbsp;
          <input type="radio" name="familyCategory" value="2"/>不放心户
        </div>
        <div>
          <label>电&nbsp;&nbsp;&nbsp;&nbsp;话：</label>
          <input
            placeholder="电话"
            type="text"
            name="phone"
            style="width: 260px; height: 25px; margin-bottom: 15px"
          />
        </div>
        <div>
          <label>住房情况：</label>
          <input
            placeholder="住房情况"
            type="text"
            name="housingSituation"
            style="width: 200px; height: 25px; margin-bottom: 15px"
          />(单位:间)
        </div>
        <div>
          <label>家庭人数：</label>
          <input
            placeholder="家庭人数"
            type="text"
            name="familyNum"
            style="width: 260px; height: 25px; margin-bottom: 15px"
          />
        </div>
        <div>
          <label>是否有重点人员：</label>
          <input type="radio" name="keyPersonnel" value="0"/>否&nbsp;&nbsp;
          <input type="radio" name="keyPersonnel" value="1"/>是
        </div>
        <div>
          <label>直属乡镇：</label>
          <input
            placeholder="直属乡镇"
            type="text"
            name="township"
            style="width: 260px; height: 25px; margin-top: 15px"
          />
        </div>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="centerDialogVisible = false"
          >取消</el-button
        >
        <el-button size="mini" @click="addVillage">确定</el-button>
      </span>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog
      title="修改村户信息"
      :visible.sync="editVisible"
      width="400px"
      center
    >
      <el-form :model="form" ref="form" label-width="80px">
        <el-form-item prop="name" label="村户姓名" size="mini">
          <el-input v-model="form.name" placeholder="村户姓名"></el-input>
        </el-form-item>
        <el-form-item label="家庭类别" size="mini">
          <el-radio-group v-model="form.familyCategory">
            <el-radio :label="0">一般户</el-radio>
            <el-radio :label="1">放心户</el-radio>
            <el-radio :label="2">不放心户</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="phone" label="电话" size="mini">
          <el-input v-model="form.phone" placeholder="电话"></el-input>
        </el-form-item>
        <el-form-item prop="housingSituation" label="住房情况" size="mini">
          <el-input
            v-model="form.housingSituation"
            placeholder="住房情况"
          ></el-input>
        </el-form-item>
        <el-form-item prop="familyNum" label="家庭人数" size="mini">
          <el-input v-model="form.familyNum" placeholder="家庭人数"></el-input>
        </el-form-item>
        <el-form-item label="是否有重点人员" size="mini">
          <el-radio-group v-model="form.keyPersonnel">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="township" label="直属乡镇" size="mini">
          <el-input v-model="form.township" placeholder="直属乡镇"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="editVisible = false">取消</el-button>
        <el-button size="mini" @click="editVillage">确定</el-button>
      </span>
    </el-dialog>

    <!-- 删除 -->
    <el-dialog
      title="删除村户信息"
      :visible.sync="delVisible"
      width="300px"
      center
    >
      <div align="center">删除不可恢复，知否确定删除？</div>
      <span slot="footer">
        <el-button size="mini" @click="delVisible = false">取消</el-button>
        <el-button size="mini" @click="deleteRow">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mixin } from "../mixins/index";
import { villageOfTownsId, updateVillage, deleteVillage } from "../api/index";
export default {
  mixins: [mixin],
  data() {
    return {
      townsId: "", //村镇id
      townsName: "", //村镇名称
      centerDialogVisible: false, //添加弹窗是否显示
      editVisible: false, //编辑弹窗是否显示
      delVisible: false, //删除弹窗是否显示
      tableData: [],
      tempData: [],
      select_word: "",
      pageSize: 5, //分页每页大小
      currentPage: 1, //当前页
      idx: -1, //当前选择项
      multipleSelection: [], //哪些项已经打勾
      // 添加框
      registerForm: {
        name: "",
        familyCategory: "",
        phone: "",
        housingSituation: "",
        familyNum: "",
        keyPersonnel: "",
        township: "",
      },
      // 编辑框
      form: {
        id: "",
        name: "",
        familyCategory: "",
        phone: "",
        housingSituation: "",
        familyNum: "",
        keyPersonnel: "",
        township: "",
      },
    };
  },
  computed: {
    //计算当前搜索结果表里的数据
    data() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  watch: {
    //搜索框里面的内容发生变化的时候，搜索结果table列表的内容跟着它的内容发生变化
    select_word: function () {
      if (this.select_word == "") {
        this.tableData = this.tempData;
      } else {
        this.tableData = [];
        for (let item of this.tempData) {
          if (item.name.includes(this.select_word)) {
            this.tableData.push(item);
          }
        }
      }
    },
  },
  created() {
    this.townsId = this.$route.query.id;
    this.townsName = this.$route.query.name;
    this.getData();
  },
  methods: {
    //获取当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    //查询所有村户
    getData() {
      this.tempData = [];
      this.tableData = [];
      villageOfTownsId(this.townsId).then((res) => {
        this.tempData = res;
        this.tableData = res;
        this.currentPage = 1;
      });
    },
    addVillage() {
      let _this = this;
      var form = new FormData(document.getElementById("tf"));
      form.append("townsId", this.townsId);
      form.append("name", this.name);
      form.append("familyCategory", this.familyCategory);
      form.append("phone", this.phone);
      form.append("housingSituation", this.housingSituation);
      form.append("familyNum", this.familyNum);
      form.append("keyPersonnel", this.keyPersonnel);
      form.append("township",this.township);
      var req = new XMLHttpRequest();
      req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status === 200) {
          let res = JSON.parse(req.response);
          if (res.code) {
            _this.getData();
            _this.registerForm = {};
            _this.notify(res.msg, "success");
          } else {
            _this.notify("保存失败", "error");
          }
        }
      };
      req.open("post", `${_this.$store.state.HOST}/village/add`, false);
      req.send(form);
      _this.centerDialogVisible = false;
    },
    //弹出编辑页面
    handleEdit(row) {
      this.editVisible = true;
      this.form = {
        id: row.id,
        name: row.name,
        familyCategory: row.familyCategory,
        phone: row.phone,
        housingSituation: row.housingSituation,
        familyNum: row.familyNum,
        keyPersonnel: row.keyPersonnel,
        township: row.township,
      };
    },
    // 保存编辑页面修改的数据
    editVillage() {
      let params = new URLSearchParams();
      params.append("id", this.form.id);
      params.append("name", this.form.name);
      params.append("familyCategory", this.form.familyCategory);
      params.append("phone", this.form.phone);
      params.append("housingSituation", this.form.housingSituation);
      params.append("familyNum", this.form.familyNum);
      params.append("keyPersonnel", this.form.keyPersonnel);
      params.append("township",this.form.township);

      updateVillage(params)
        .then((res) => {
          if (res.code === 1) {
            this.getData();
            this.notify("修改成功", "success");
          } else {
            this.notify("修改失败", "error");
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.editVisible = false;
    },
    // 删除村户信息
    deleteRow() {
      deleteVillage(this.idx)
        .then((res) => {
          if (res) {
            this.getData();
            this.notify("删除成功", "success");
          } else {
            this.notify("删除失败", "error");
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.delVisible = false;
    },
  },
};
</script>
<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
.pagination {
  display: flex;
  justify-content: center;
}
</style>
